<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付订单 - 网上书城</title>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>-->

    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <link rel="stylesheet" href="./js/index.css">-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
    <script src="./js/vue.min.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="./js/axios.min.js"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="./js/index.js"></script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #ebeef5;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
            color: #409EFF;
        }
        .steps {
            margin: 30px 0;
        }
        .order-info {
            margin: 30px 0;
            padding: 20px;
            background: #f8f8f9;
            border-radius: 4px;
            text-align: center;
        }
        .order-id {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .order-amount {
            font-size: 28px;
            color: #ff5000;
            margin: 15px 0;
            font-weight: bold;
        }
        .pay-methods {
            margin: 30px 0;
            text-align: center;
        }
        .alipay-logo {
            width: 180px;
            margin: 20px auto;
        }
        .loading {
            margin: 30px 0;
            padding: 20px;
        }
        .loading-text {
            margin-top: 15px;
            font-size: 16px;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #909399;
            font-size: 14px;
        }
        .success-message {
            color: #67C23A;
            font-size: 24px;
            margin: 30px 0;
        }
        .success-icon {
            font-size: 60px;
            color: #67C23A;
            margin: 20px 0;
        }
        .back-btn {
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1>网上书城 - 订单支付</h1>
        </div>

        <div class="steps">
            <el-steps :active="2" align-center>
                <el-step title="购物车" description="选择商品"></el-step>
                <el-step title="订单确认" description="确认订单信息"></el-step>
                <el-step title="支付" description="完成支付"></el-step>
            </el-steps>
        </div>

        <!-- 支付成功显示 -->
        <div v-if="paySuccess">
            <i class="el-icon-success success-icon"></i>
            <div class="success-message">支付成功！</div>
            <p>订单号：{{ orderId }}</p>
            <p>支付金额：¥{{ orderAmount.toFixed(2) }}</p>
            <p>感谢您的购买，我们将尽快为您发货</p>
            <el-button type="primary" class="back-btn" @click="goToHome">返回首页</el-button>
        </div>

        <!-- 支付中显示 -->
        <div v-else>
            <div class="order-info">
                <div class="order-id">订单号：{{ orderId }}</div>
                <div class="order-amount">¥{{ orderAmount.toFixed(2) }}</div>
                <p>请尽快完成支付，订单将在30分钟后自动关闭</p>
            </div>

            <div class="pay-methods">
                <h3>选择支付方式</h3>
                <img src="https://img.alicdn.com/tfs/TB1w2cEf4z1gK0jSZSgXXavwpXa-780-780.png"
                     class="alipay-logo"
                     alt="支付宝">
                <p>支付宝安全支付</p>
            </div>

            <div class="loading" v-loading="loading">
                <div class="loading-text">正在连接支付宝支付网关...</div>
            </div>

            <el-button type="primary" @click="initiatePayment">立即支付</el-button>

            <!-- 支付宝支付表单容器（隐藏） -->
            <div id="alipay-form-container" v-html="alipayForm" style="display:none;"></div>
        </div>

        <div class="footer">
            <p>© 2025 网上书城 - 专业图书购物平台</p>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                orderId: '',
                orderAmount: 0,
                loading: false,
                alipayForm: '',
                paySuccess: false
            };
        },
        mounted() {
            // 从sessionStorage获取订单信息
            const orderData = sessionStorage.getItem('currentOrder');
            if (orderData) {
                const order = JSON.parse(orderData);
                this.orderId = order.orderId;
                this.orderAmount = order.totalAmount;

                // 自动发起支付（实际应用中可能需要用户确认）
                this.initiatePayment();
            } else {
                this.$message.error('未找到订单信息');
            }
        },
        methods: {
            initiatePayment() {
                this.loading = true;

                // 确保金额是字符串格式的两位小数
                const formattedAmount = parseFloat(this.orderAmount).toFixed(2);

                // 调用支付宝支付接口
                const params = new URLSearchParams();
                params.append('out_trade_no', this.orderId);
                params.append('subject', '网上书城图书订单');
                params.append('total_amount', formattedAmount);
                params.append('body', '图书购买');

                // 发送POST请求获取支付宝支付表单
                axios.post('/pay/aliPay', params, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(response => {
                        this.alipayForm = response.data;

                        // 延迟执行表单提交，确保DOM更新
                        this.$nextTick(() => {
                            // 查找并提交支付宝表单
                            const form = document.querySelector('#alipay-form-container form');
                            if (form) {
                                form.submit();
                            } else {
                                this.$message.error('支付表单生成失败');
                                this.loading = false;
                            }
                        });
                    })
                    .catch(error => {
                        console.error('支付请求错误:', error);
                        this.$message.error('支付请求失败: ' + error.message);
                        this.loading = false;
                    });
            },
            // initiatePayment() {
            //     this.loading = true;
            //     // 确保金额是字符串格式的两位小数
            //     const formattedAmount = parseFloat(this.orderAmount).toFixed(2);
            //
            //     // 调用支付宝支付接口
            //     const paymentData = {
            //         out_trade_no: this.orderId,
            //         subject: '网上书城图书订单',
            //         total_amount: this.orderAmount,
            //         body: '图书购买'
            //     };
            //
            //     // 发送POST请求获取支付宝支付表单
            //     axios.post('/pay/aliPay', paymentData, {
            //         headers: {
            //             'Content-Type': 'application/x-www-form-urlencoded'
            //         }
            //     })
            //         .then(response => {
            //             this.alipayForm = response.data;
            //
            //             // 延迟执行表单提交，确保DOM更新
            //             this.$nextTick(() => {
            //                 // 查找并提交支付宝表单
            //                 const form = document.querySelector('#alipay-form-container form');
            //                 if (form) {
            //                     form.submit();
            //                 } else {
            //                     this.$message.error('支付表单生成失败');
            //                     this.loading = false;
            //                 }
            //             });
            //         })
            //         .catch(error => {
            //             console.error('支付请求错误:', error);
            //             this.$message.error('支付请求失败');
            //             this.loading = false;
            //         });
            // },

            goToHome() {
                window.location.href = 'index.html';
            },

            // 检查支付结果（实际应由支付宝回调处理）
            checkPaymentStatus() {
                // 这里仅模拟支付成功
                setTimeout(() => {
                    this.paySuccess = true;
                }, 3000);
            }
        }
    });
</script>
</body>
</html>